<template>
  <div class="container">
    <Breadcrumb :items="['menu.list', '资产列表']" />
    <a-card class="general-card" title="资产列表">
      <formCom
        ref="formComDom"
        :option="option"
        :key-count="state.keyCount"
        @serachFn="serachFn"
      />
      <div class="right-btn">
        <el-button plan type="primary" @click="actionFn('add', {})"
          >新增资产</el-button
        >
      </div>
      <kxTable
        :table-data="list"
        :column-list="columnList"
        border
        :loading="listLoading"
      >
        <template #assetCategory="{ row }">
          {{ getZichanType(row.assetCategory) }}
        </template>
        <template #options="{ row }">
          <el-button link type="primary" @click="actionFn('view', row)"
            >查看</el-button
          >
          <el-button link type="primary" @click="actionFn('edit', row)"
            >编辑</el-button
          >
          <el-button link plan type="danger" @click="actionFn('del', row)"
            >删除</el-button
          >
        </template>
      </kxTable>
      <Pagination
        v-model:limit="pageSize"
        v-model:page="currentPage"
        :total="total"
        @pagination="getList()"
        @pagination-size-change="getList(1)"
      />
    </a-card>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, reactive } from 'vue';
  // import formCom from "@/components/formCom/formCom.vue";
  // import kxTable from "@/components/Table/index.vue"

  import { useRouter, useRoute } from 'vue-router';

  import { searchList, tableList, getZichanType } from './table.js';
  import { ElMessageBox, ElMessage } from 'element-plus';
  import { useList } from '@/use/index';
  import { equipmentListApi, equipmentDelApi } from '@/utils/apiConfig';

  console.log('tableList', tableList);
  const {
    searchForm,
    list,
    listLoading,
    total,
    currentPage,
    pageSize,
    getList,
    handleSearch,
    resetSearch,
  } = useList(equipmentListApi);
  const router = useRouter();
  const route = useRoute();
  const {} = route.query;
  const state = reactive({
    keyCount: 1,
  });
  searchForm.value = {
    assetName: '', // 与后端搜索参数一致
    assetStatus: '',
    assetType: '',
  } as any;
  const columnList = ref(tableList);
  const option = reactive(searchList);
  function inits() {
    getList();
  }
  function actionFn(type: string, item: any) {
    console.log(type);
    switch (type) {
      case 'add':
        router.push({ path: 'assetsDetail', query: { type } });
        break;
      case 'view':
        router.push({ path: 'assetsDetail', query: { type, id: item.id } });
        break;
      case 'edit':
        router.push({ path: 'assetsDetail', query: { type, id: item.id } });
        break;
      case 'del':
        ElMessageBox.confirm('确定删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            equipmentDelApi({ addPath: item.id }).then(() => {
              getList();
              ElMessage.success('删除成功');
            });
          })
          .catch(() => {});

        break;

      default:
        break;
    }
  }
  function serachFn(obj: any) {
    console.log('111', obj);
    searchForm.value = obj;
    getList(1);
  }

  onMounted(() => {
    inits();
  });
</script>

<style lang="less" scoped>
  .container {
    padding: 0 20px 20px 20px;
  }
</style>
